<template>
	<uni-popup
		ref="spec"
		type="bottom"
		:maskClick="true"
		class="popup"
	>
		<view
			class="wrap"
			@tap.stop.prevent
			@touchmove.stop.prevent
		>
			<view class="flex justify-between">
				<view class="margin-right">
					<image
						class="block-150 radius bg-gray"
						mode="aspectFill"
						:src="thumb"
						@click="preview(thumb)"
					></image>
				</view>
				<view class="flex-sub flex flex-direction justify-end">
					<view class="text-theme text-bold">
						<text class="text-price">{{ price }}</text>
					</view>
					<view class="text-sm text-999 margin-top-xs">库存 {{ stock }}</view>
					<view
						style="height: 80rpx"
						class="text-df text-666 margin-top-xs text-cut-2"
					>
						<text v-if="skuName">已选择: {{ skuName }}</text>
					</view>
				</view>
				<view class="close-box">
					<text
						class="cuIcon-close"
						@tap="close"
					></text>
				</view>
			</view>
			<scroll-view
				class="speclist-max-height"
				scroll-y="true"
				@touchmove.stop
			>
				<view
					class="margin-top"
					v-if="speclist.length > 0"
				>
					<block
						v-for="(item, index) in speclist"
						:key="index"
					>
						<view>
							<view class="text-sm text-333 text-bold padding-bottom-sm">{{ item.name }}</view>
							<view class="item">
								<template v-for="(item2, index2) in item.spec_value">
									<template v-if="isDisable(index, item2.id)">
										<view
											:key="index2"
											class="item-tag"
											:class="{ active: selectSkuId[index] == item2.id }"
											@tap="selectSpec(index, item2)"
										>
											{{ item2.item }}
										</view>
									</template>
									<template v-else>
										<view
											:key="index2"
											class="item-tag disable"
										>
											{{ item2.item }}
										</view>
									</template>
								</template>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
			<view class="margin-top">
				<view class="flex justify-between align-center padding-tb-sm">
					<view class="text-333 text-sm text-bold">数量</view>
					<uni-number-box
						v-if="Number(limit)"
						:value="number"
						:min="1"
						:max="Number(limit)"
						@change="setnumber"
						:step="1"
					></uni-number-box>
					<uni-number-box
						v-else
						:value="number"
						:min="1"
						:max="Number(stock)"
						@change="setnumber"
						:step="1"
					></uni-number-box>
				</view>
				<view
					class="text-right text-theme text-sm"
					v-if="Number(limit) > 0"
				>此商品限购{{ limit }}件</view>
			</view>
			<view class="margin-top flex round overHidden">
				<view
					v-if="['cart', 'all'].includes(type)"
					class="flex-sub btn color1"
					@tap.stop="handleSubmit('addCart')"
				>加入购物车</view>
				<view
					v-if="['buy', 'all'].includes(type)"
					class="flex-sub btn color2"
					@tap.stop="handleSubmit('buyNow')"
				>立即抢购</view>
				<view
					v-if="type == 'confirm'"
					class="flex-sub btn color3"
					@tap.stop="handleSubmit('confirm')"
				>确认</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'benben-specs-popup',
		props: {
			priceName: {
				//商品价格字段
				type: [String, Number],
				default: 'shop_price',
			},
			// spu规格列表
			speclist: {
				type: Array,
				default: () => [],
			},
			// sku列表
			skulist: {
				type: [Array, Object],
				default: () => [],
			},
			limit: {
				type: [String, Number],
				default: 0,
			},
			//选中的规格
			skuId: {
				type: [String, Number],
				default: 0,
			},
			skuName: {
				type: [String, Number],
				default: 0,
			},
			price: {
				type: [String, Number],
				default: 0,
			},
			marketPrice: {
				type: [String, Number],
				default: 0,
			},

			memberPrice: {
				type: [String, Number],
				default: 0,
			},
			stock: {
				type: [String, Number],
				default: 0,
			},
			number: {
				type: [String, Number],
				default: 1,
			},
			thumb: {
				type: [String],
				default: '',
			},
			activeSkuTag: {
				type: [String],
				default: '',
			},
			skuTag: {
				type: [String],
				default: '',
			},
		},
		data() {
			return {
				selectSkuId: [],
				selectSkuName: [],
				type: '',
				flag: false,
			}
		},
		computed: {
			skulistArr() {
				let skulistArr = []
				Object.values(this.skulist).map((item) => {
					skulistArr.push(item.key.split('_'))
				})
				return skulistArr
			},
		},
		watch: {
			skulist: {
				//监听规格改变
				handler(value) {
					this.init()
				},
				deep: true,
				immediate: true,
			},
		},
		methods: {
			// 初始化
			init() {
				let skuGoods = Object.values(this.skulist).find((item) => item.sku_id == this.skuId)
				if (skuGoods) {
					this.selectSkuId = skuGoods.key.split('_')
				} else {
					this.selectSkuId = new Array(this.speclist.length)
				}
				this.selectSkuId.map((item, index) => {
					if (!item) return
					let is_upload_image = this.speclist[index].is_upload_image || '0'
					if (is_upload_image == '0') return
					let selectItem = this.speclist[index].spec_value.find((val) => val.id == item)
					this.$emit('update:thumb', selectItem.thumb)
				})
				this.getSelectSkuName()
				this.selectGoods()
			},
			getSelectSkuName() {
				let selectSkuName = new Array(this.speclist.length)
				this.selectSkuId.map((item, i) => {
					if (!item) return
					let specitem = this.speclist[i].spec_value.find((val) => val.id == item)
					selectSkuName[i] = (specitem && specitem.item) || ''
				})
				selectSkuName = selectSkuName.filter((item) => item)
				this.$emit('update:sku-name', selectSkuName.join(','))
			},
			// 判断是否禁用
			isDisable(index, id) {
				let isSelecArr = []
				this.selectSkuId.map((item, i) => {
					if (i !== index && item) {
						isSelecArr.push({
							index: i,
							id: item,
						})
					}
				})
				if (!isSelecArr.length) return true
				let skulistArr = this.skulistArr.filter((item) => {
					let isSelec = isSelecArr.every((selecitem) => {
						return item[selecitem.index] == selecitem.id
					})
					return isSelec && item[index] == id
				})
				return skulistArr.length
			},
			// 点击添加购物车
			handleSubmit(type) {
				let emptyIndex = this.selectSkuId.findIndex((item) => !item)
				//判断多规格商品是否选择了规格
				if (this.selectSkuId.length && emptyIndex != -1) return this.$message.info(`请选择${this.speclist[emptyIndex].name}`)
				if (this.stock <= 0) return this.$message.info(`暂无库存`)
				this.$emit(type)
			},
			// 数量改变
			setnumber(e) {
				this.$emit('update:number', e)
			},
			// 点击规格
			selectSpec(index, item) {
				let is_upload_image = this.speclist[index].is_upload_image || '0'
				if (this.selectSkuId[index] == item.id) {
					this.$set(this.selectSkuId, index, '')
				} else {
					this.$set(this.selectSkuId, index, item.id)
				}
				if (is_upload_image == '1') {
					this.$emit('update:thumb', item.thumb)
				}
				this.getSelectSkuName()
				this.selectGoods()
			},
			// 获取选中商品的信息
			selectGoods() {
				let selectSkuId = this.selectSkuId.filter((item) => item)
				if (selectSkuId.length !== Object.keys(this.speclist).length) return
				selectSkuId = selectSkuId.join('_')
				let skuGoods = Object.values(this.skulist).find((item) => item.key == selectSkuId)
				if (skuGoods) {
					this.$emit('update:market-price', skuGoods.market_price)
					this.$emit('update:member-price', skuGoods.member_price)
					this.$emit('update:price', skuGoods[this.priceName])
					this.$emit('update:stock', skuGoods.stock)
					if (skuGoods.hasOwnProperty('limit') && skuGoods.limit) {
						this.$emit('update:limit', skuGoods.limit)
						if (+skuGoods.limit < !+this.number) {
							this.$emit('update:number', skuGoods.limit)
						}
					}
					if (+skuGoods.stock < +this.number) {
						this.$emit('update:number', skuGoods.stock)
					}
					if (+skuGoods.stock < +this.number) {
						this.$emit('update:number', skuGoods.stock)
					}
					if (+skuGoods.stock && !+this.number) {
						this.$emit('update:number', 1)
					}

					this.$emit('update:sku-id', skuGoods.sku_id)
					if (skuGoods.thumb) {
						this.$emit('update:thumb', skuGoods.thumb)
					}
				}
			},
			// 打开弹窗
			open(type) {
				this.type = type || 'all'
				this.init()
				this.$refs.spec.open()
			},
			// 关闭弹窗
			close() {
				this.$refs.spec.close()
			},
			// 规格预览图片
			preview(urls) {
				uni.previewImage({
					current: urls,
					urls: [urls],
				})
			},
		},
	}
</script>

<style
	lang="scss"
	scoped
>
	.wrap {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.close-box {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999999;
			font-size: 28rpx;
			font-weight: bold;
		}

		.item {
			display: flex;
			flex-wrap: wrap;

			.item-tag {
				display: inline-block;
				font-size: 24rpx;
				color: var(--sku-tag-color);
				background: var(--sku-tag-bg);
				padding: 12rpx 24rpx;
				border-radius: 100rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border: 1px solid var(--sku-tag-bg);
			}

			.item-tag.active {
				background-color: var(--active-sku-tag-bg);
				color: var(--active-sku-tag-color);
				border-color: var(--active-sku-tag-color);
			}

			.item-tag.disable {
				color: #cccccc !important;
			}
		}

		.btn {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #ffffff;
		}
	}

	.block-150 {
		width: 150rpx;
		height: 150rpx;
		min-width: 150rpx;
		min-height: 150rpx;
	}

	.color1 {
		background: var(--buy-btn-bg);
	}

	.color2 {
		background: var(--cart-btn-bg);
	}

	.color3 {
		background: var(--confirm-btn-bg);
	}

	.overHidden {
		overflow: hidden;
	}

	.popup /deep/.uni-popup__wrapper-box {
		max-height: 100% !important;
	}

	.speclist-max-height {
		// #ifndef MP-WEIXIN
		max-height: 800rpx;
		// #endif
		// #ifdef MP-WEIXIN
		max-height: 650rpx;
		// #endif
	}
</style>